<template>
  <div ref="container">
    <a-form @submit="handleSubmit" :form="form" :bordered="false">
      <a-modal width="60%" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :destroyOnClose="true">
        <template slot="footer">
          <a-button key="cancel" class="common-btn" @click="handleCancel">取消</a-button>
          <a-button key="submit" class="common-btn" @click="handleSubmit">确定</a-button>
        </template>
        <a-card :bordered="false" class="card-common">
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="企业名称" :labelCol="{lg: {span: 8}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
                <a-input v-model="queryParam.proCode" placeholder="企业名称"/>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="企业类型" :labelCol="{lg: {span: 8}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
                <a-textarea v-model="queryParam.proName" rows="1" placeholder="企业类型"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="联系人" :labelCol="{lg: {span: 8}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
                <a-input v-model="queryParam.dutyCompany" placeholder="联系人"/>
              </a-form-item>
            </a-col>
            <a-col :lg="3" :md="12" :sm="24" style="margin-left:30px;">
              <a-form-item label="" :colon="false">
                <a-button class="common-btn" @click="toSearch('2')" style="margin-top: 8px;">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>

          <a-table
            :columns="columns"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            :dataSource="loadData"
            bordered
            :loading="loading"
            :pagination="false">
          </a-table>
        </a-card>
      </a-modal>
    </a-form>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'InstallDistributeModel',
  components: {
    Breadcrumb
  },
  data () {
    return {
      name: '',
      breadList: [],
      selectedRowKeys: [],
      visible: false,
      confirmLoading: false,
      loading: false,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '企业全称',
          dataIndex: 'companyName'
        }, {
          title: '联系人',
          dataIndex: 'companyPerson'
        }, {
          title: '联系电话',
          dataIndex: 'companyPhone'
        }, {
          title: '企业类型',
          dataIndex: 'companyType'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: []
    }
  },
  created () {
    this.loading = true
    // this.form.resetFields()
    this.getBreadCrumb()
    setTimeout(() => {
      this.getData('1')
    }, 1000)
  },
  // watch: {
  //   selectedRowKeys (newVal, oldVal) {
  //     console.log('-----', newVal, oldVal)
  //     this.selectedRowKeys = newVal
  //   }
  // },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    add () {
      this.visible = true
      this.$emit('add')
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
    },
    getData (code) {
      const data = [
        {
          companyName: '美的上海',
          companyPerson: '赵四',
          companyPhone: '16666666666',
          companyType: '设备厂商'
        }, {
          companyName: '美的上海',
          companyPerson: '赵四',
          companyPhone: '16666666666',
          companyType: '设备厂商'
        }, {
          companyName: '美的上海',
          companyPerson: '赵四',
          companyPhone: '16666666666',
          companyType: '设备厂商'
        }, {
          companyName: '美的上海',
          companyPerson: '赵四',
          companyPhone: '16666666666',
          companyType: '设备厂商'
        }, {
          companyName: '美的上海',
          companyPerson: '赵四',
          companyPhone: '16666666666',
          companyType: '设备厂商'
        }, {
          companyName: '美的上海',
          companyPerson: '赵四',
          companyPhone: '16666666666',
          companyType: '设备厂商'
        }
      ]
      if (code === '1') {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
          this.$success({
            title: '查询成功'
          })
        }, 1000)
      }
    },
    toSearch (status) {
      this.loading = true
      this.getData(status)
    },
    handleSubmit () {
      const that = this
      this.$confirm({
        title: '确认安装分配吗',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '安装分配成功'
          })
          that.visible = false
        }
      })
    },
    handleCancel () {
      this.visible = false
      // this.form.resetFields()
      // this.resetForm()
    }
  }
}

</script>

<style lang="less" scoped>
.card-common {
  margin-bottom: 0px;
}
/deep/.ant-card-body {
  padding: 24px 24px 0;
}
</style>
